<template>
	<view>
		<no-data v-if="reserveData.length == 0" :tips="'暂无数据'"></no-data>
		<view v-for="(item, index) in reserveData" :key="index" class="item" @click="onItemClick(item.id)">
			<view class="top">
				<view>
					<text>支付时间：</text>
					<text>{{item.pay_time}}</text>
				</view>
				<view>
					<text v-if="item.status==1" class="status-text blue-status">待发货</text>
					<text v-else-if="item.status==2" class="status-text green-status">发货中</text>
					<text v-else-if="item.status==3" class="status-text red-status">已完成</text>
				</view>
			</view>
			<view class="mid">
				<!-- <image class="img" :src="item.snap_img?item.snap_img:item.t_name.top_img"></image> -->
				<view class="word">
					<text class="title">平台单号：{{item.platform_code}}</text>
				</view>
				<view class="word">
					<block v-if="item.shipped_count >0">
						<text class="title">已发货：{{item.shipped_count}}/{{item.qty}}</text>
					</block>
					<block v-else>
						<text style="color: #999;">暂未发货</text>
					</block>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-words">
					<view class="bottom-item">
						<text>总数：</text>
						<text class="red-status">{{item.qty}}</text>
					</view>
					<view class="bottom-item">
						<text>总金额：</text>
						<text class="red-status">￥{{item.payment}}</text>
					</view>
				</view>
				<block v-if="item.status == 1">
					<view class="bottom-button" @click="onShipClick(item.id)">发起发货</view>
				</block>
				<block v-if="item.status ==2">
					<view class="bottom-button success-button" @click="onDetailClick(item.id)">已发货明细</view>
					<view class="bottom-button" @click="onShipClick(item.id)">发起发货</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/littleu-no-data/no-data.vue'
	export default {
		components: {
			noData
		},
		props: {
			reserveData: Array
		},
		methods: {
			onItemClick(id){
				this.$emit('itemClick',{id})
			},
			onShipClick(id){
				this.$emit('shipClick',{id})
			},
			onDetailClick(id){
				this.$emit('detailClick',{id})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		width: 710rpx;
		margin: 20rpx auto;
		border-radius: 16rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #999;
	}

	.top {
		width: 670rpx;
		margin: 0 auto;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mid{
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.img {
		width: 180rpx;
		height: 180rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.word {
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
	}

	.title {
		color: #333;
		font-size: 28rpx;
	}
	.bottom {
		width: 670rpx;
		margin: 0 auto;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.bottom-words{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.bottom-item{
		margin-right: 20rpx;
	}
	.bottom-button{
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 16rpx;
		text-align: center;
		background-color: $uni-color-primary;
		color: #fff;
	}
	.success-button{
		background-color: $uni-color-success;
		// width: 140rpx;
		// height: 60rpx;
		// line-height: 60rpx;
		// border-radius: 16rpx;
		// text-align: center;
		// color: #fff;
	}

	.status-text {
		margin-right: 20rpx;
	}

	.green-status {
		color: #6EC2AE;
	}

	.blue-status {
		color: #007aff;
	}

	.red-status {
		color: #dd524d;
	}

	.gray-status {
		color: #999;
	}
	.status-button{
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #dd524d;
		color: #fff;
		margin-top: 20rpx;
	}
	.disabled{
		background-color: #bb9667;
	}
</style>
